<template>
  <div class="container" ref="map" @mousemove="mousemove" v-on:contextmenu.prevent="contextmenu">
    <div class="hero" ref="hero">
      <div
        class="cd"
        :style="{
          opacity: cdTime == 0 ? '0' : '0.7',
        }"
      >
        {{ cdTime }}
      </div>
    </div>
    <div class="q" ref="q"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, shallowRef, onMounted } from "vue"
import { useMessage } from "naive-ui"
const msg = useMessage()
const map = shallowRef<HTMLDivElement>()
const hero = shallowRef<HTMLDivElement>()
const q = shallowRef<HTMLDivElement>()
let left: string
let top: string
let heroTop: string
let heroLeft: string
let flag: boolean = true
let heroMoveIsEnd: boolean = false
let qCd: number = 3
let cdTime = ref<number>(0)
let isFirst: boolean = true

function contextmenu({ x, y }) {
  const parent = map.value.offsetParent as HTMLDivElement
  const offsetTop: number = parent.offsetTop
  const offsetLeft: number = parent.offsetLeft

  hero.value.style.left = x - offsetLeft + "px"
  hero.value.style.top = y - offsetTop + "px"
  heroTop = y - offsetTop + "px"
  heroLeft = x - offsetLeft + "px"
  q.value.style.left = x - offsetLeft + "px"
  q.value.style.top = y - offsetTop + "px"
  if (isFirst) {
    msg.info("告诉你一个小秘密键盘按下Q还可以发动技能哦")
    isFirst = false
  }
}
function mousemove({ x, y }) {
  const parent = map.value.offsetParent as HTMLDivElement
  const offsetTop: number = parent.offsetTop
  const offsetLeft: number = parent.offsetLeft
  left = x - offsetLeft + "px"
  top = y - offsetTop + "px"
}
function keydown({ key }) {
  if (key == "q" || key == "r") {
    if (flag) {
      if (heroMoveIsEnd) {
        map.value.style.setProperty("--top", top)
        map.value.style.setProperty("--left", left)
        q.value.classList.add("attack")
        cdTime.value = qCd
      } else {
        return
      }
    } else {
      msg.warning("技能正在cd中")
      return
    }
    flag = false
    const timer = setInterval(() => {
      cdTime.value--
      if (cdTime.value == 0) {
        clearInterval(timer)
        flag = true
      }
    }, 1000)
  }
}
onMounted(() => {
  document.body.onkeydown = keydown
  q.value.addEventListener("animationend", () => {
    q.value.classList.remove("attack")
  })
  hero.value.addEventListener("transitionend", () => {
    heroMoveIsEnd = true
  })
  hero.value.addEventListener("transitionstart", () => {
    heroMoveIsEnd = false
  })
  msg.info("请用鼠标右击控制移动")
})
</script>

<style lang="scss" scoped>
.container {
  --top: 0;
  --left: 0;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background: var(--BlockBgColor);
  box-sizing: border-box;
  transition: background 0.3s var(--n-bezier);
  font-size: 50px;
  color: var(--TextColor);
  position: relative;
  cursor: pointer;
  .hero {
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: url(https://game.gtimg.cn/images/lol/act/img/skinloading/81000.jpg);
    background-size: cover;
    transition: all 1s linear;
    .cd {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      @include center;
      color: var(--BlockBgColor);
      background: var(--iconColor);
      transition: all 0.8s var(--n-bezier);
    }
  }
  .q {
    width: 50px;
    height: 50px;
    background: url(https://game.gtimg.cn/images/lol/act/img/spell/EzrealR.png);
    border-radius: 50%;
    background-size: cover;
    position: absolute;
    top: var(--top);
    left: var(--left);
    opacity: 0;
    z-index: 2;
  }
  .attack {
    animation: attack 1s var(--n-bezier);
  }
  @keyframes attack {
    0% {
      opacity: 1;
    }
    100% {
      top: var(--top);
      left: var(--left);
      opacity: 0;
    }
  }
}
</style>
